<template>
    <div class="login-index">
        <h2 class="login-title">极简打分器</h2>
        <div class="login-info">
            <div class="login-info-publi">
                <p class="mini-score">极简打分器</p>
                <p class="mini-berif">简单轻松上手，10秒快速出分。</p>
            </div>
            <div class="login-images">
                <div class="login-images-item">
                    <p class="spara">单评分模式</p>
                    <img src="@/assets/onlyOne.jpg" alt="">
                </div>
                <div class="login-images-item">
                    <p class="spara">多评分模式</p>
                    <img src="@/assets/multif.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="bottomBtn">
            <van-button style="margin:auto;width:95%;height:6vh;border-radius:.23rem;margin-bottom:.3rem"
                color="linear-gradient(to right, #5c79f7, #5c74f4)" @click="toLogin">登录</van-button>
            <div class="sure-p" @click="toSureUser">
                <div class="surePeople"
                    :style="{ background: sureUser ? '#484869' : 'linear-gradient(to right, #575cfe, #5e80ff)', color: sureUser ? '' : '#fff' }">
                    <van-icon name="success" />
                </div>
                我已阅读并同意<span class="user-agrer">《用户协议》《隐私政策》</span>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            sureUser: true,
        }
    },
    methods: {
    ...mapMutations('user', ['updateUserInfo']),
        toLogin() {
            if (!this.sureUser) {
                this.$router.push({
                    path: '/ticketing/getCode',
                    query: {
                    }
                })
            }
        },
        toSureUser() {
            this.sureUser = !this.sureUser
        }
    },
    created() {
        this.updateUserInfo()
    }
}
</script>

<style lang="less" scoped>
.login-index {
    min-height: 100vh;
    min-width: 100vw;
    padding: .3rem .4rem .2rem;
    color: #fff;
    font-size: .4rem;

    .login-title {
        font-size: .4rem;
        font-weight: 500;
        margin-bottom: 1.8rem;
    }

    .login-info {
        margin-left: .25rem;

        .login-info-publi {
            margin-bottom: 1rem;

            .mini-score {
                font-size: .5rem;
                font-weight: 600;
                margin-bottom: .2rem;
                background: linear-gradient(to bottom right, #ad6de8, #6e58e9);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
        }

        .login-images {
            display: flex;
            justify-content: space-between;

            .login-images-item {
                width: 50%;

                .spara {
                    font-size: .35rem;
                    margin-bottom: .4rem;
                }

                img {
                    width: 80%;
                }
            }
        }
    }

    .bottomBtn {
        width: 100%;
        height: 18vh;
        padding: .3rem .35rem;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #27283d;

        .sure-p {
            font-size: .3rem;

            .surePeople {
                width: .4rem;
                height: .4rem;
                font-size: .4rem;
                border-radius: .1rem;
                display: inline-block;
                justify-content: center;
                align-items: center;
                background: #484869;
                margin-right: .2rem;
                margin-left: .2rem;
            }

            .user-agrer {
                text-decoration: underline;
            }
        }
    }
}
</style>